// 所有和权限相关的操作
// 权限控制
import router from './router/index'
import store from './store'
import { getToken } from './utils/auth'
// 导入原始动态路由表
import { asyncRoutes } from './router/asyncRoutes'

console.log('控制权限生效了')
// 白名单
const whiteLIst = ['/login', '/404']

// 处理一级路由权限数据
function getFirstRoutePerms(permsArr) {
  const newArr = permsArr.map(item => { return item.split(':')[0] })
  // 数组去重
  return [...new Set(newArr)]
}

// 处理二级路由权限数据
function getSecondRoutePerms(permsArr) {
  const newArr = permsArr.map(item => {
    const arr = item.split(':')
    return `${arr[0]}:${arr[1]}`
  })
  // 数组去重
  return [...new Set(newArr)]
}
// 根据权限标识过滤 =》 最终路由表
function getRoutes(firstRoutePerms, secondRoutePerms, asyncRoutes) {
  console.log(firstRoutePerms)
  console.log(secondRoutePerms)
  if (firstRoutePerms.includes('*')) {
    // 管理员 ==动态路由表
    return asyncRoutes
  }
  // 根据一级和二级对动态路由表做过滤 return出去过滤之后的路由表
  // 1. 根据一级路由对动态路由表做过滤
  return asyncRoutes.filter(route => {
    return firstRoutePerms.includes(route.permission)
  }).map(item => {
    // 2. 对二级路由做过滤
    return {
      ...item,
      children: item.children.filter(item => secondRoutePerms.includes(item.permission))
    }
  })
}
// 路由守卫  token 控制路由
router.beforeEach(async (to, from, next) => {
  // 缓存获取token
  const token = getToken()
  if (token) {
    next()
    // console.log(!store.state.user.userProfile)
    // 只有从来没有获取过权限数据 才执行后面的逻辑  store.state.user.userProfile.id

    if (!store.state.user.profile.id) {
      //  1. 调用action函数=》获取用户权限数据 =》perms
      const perms = await store.dispatch('user/getUserProfile')
      // 2. 把后端的权限数组格式化成我们自己的俩个权限数据
      // console.log('当前的权限数据为:', perms)

      // 一级路由方法的调用
      const firstRoutePerms = getFirstRoutePerms(perms)
      // console.log(firstRoutePerms)
      // 二级路由方法的调用
      const secondRoutePerms = getSecondRoutePerms(perms)
      // console.log(secondRoutePerms)
      // 3. 根据权限标识 过滤筛选后 =》 动态路由表 最终得到有资格显示到左侧的所有路由表
      const routes = getRoutes(firstRoutePerms, secondRoutePerms, asyncRoutes)
      console.log('最终路由表', routes, firstRoutePerms, secondRoutePerms)
      // 4. 把动态路由表加入到路由系统中（当浏览器中访问路由的路径 显示渲染出来对应的组件）
      routes.forEach(route => { return router.addRoute(route) })
      // 5. 调用mutation函数=>把路由表存入Vuex
      store.commit('menu/setMenulist', routes)
    }
  } else {
  //  没有token
    if (whiteLIst.includes(to.path)) {
    // 在白名单内
      next()
    } else {
      // 拦截到登录页
      next('/login')
    }
  }
})
